<template>
  <div id="factor">
    <mt-header fixed title="智能选股">
      <mt-button icon="back" slot="left"></mt-button>
      <mt-button icon="search" slot="right"></mt-button>
    </mt-header>
    <div class="factor-list-box">
      <div class="factor-tips-box">
        <div class="cell">
          <p>您还没有筛选条件</p>
          <p>请点击下列因子筛选标签,进行筛选</p>
        </div>
      </div>
      <ul class="factor-list">
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
        <li><span>长城证券</span><mt-badge type="error">x</mt-badge></li>
      </ul>
      <i class="iconfont">&#xe699;</i>
    </div>
    <div class="factor-select-panel">
      <div class="panel-top">
        <div class="fl"><p class="top-left-text">选出结果:&nbsp;</p><p class="top-left-result">0</p></div>
        <div class="fr"><p class="top-right-text">收起筛选&nbsp;</p><p class="iconfont">&#xe600;</p></div>
      </div>
      <div class="accordin-box">
      <accordin :title="text" :data-list="Subject" @factorChange="getFactorData" :isAllDisplay='allDisplay' :isSelectSingle="false" :accordinIndex="0"></accordin>
      <accordin :title="text" :data-list="Language" @factorChange="getFactorData" :isAllDisplay='allDisplay' :isSelectSingle="false" :accordinIndex="1"></accordin>
      <accordin :title="text" :data-list="IDE" @factorChange="getFactorData" :isAllDisplay='allDisplay' :isSelectSingle="true" :accordinIndex="2"></accordin>
      <accordin :title="text" :data-list="Name" @factorChange="getFactorData" :isAllDisplay='allDisplay' :isSelectSingle="true" :accordinIndex="3"></accordin>
      <accordin :title="text" :data-list="Age" @factorChange="getFactorData" :isAllDisplay='allDisplay' :isSelectSingle="true" :accordinIndex="4"></accordin>
      <accordin :title="text" :data-list="Like" @factorChange="getFactorData" :isAllDisplay='allDisplay' :isSelectSingle="true" :accordinIndex="5"></accordin>
      </div>
    </div>
    <button @click="toggleAll">点我</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      allDisplay: true,
      factorList: [],
      text: '技术类',
      Subject: [
        {
          title: '语文'
        },
        {
          title: '英语'
        },
        {
          title: '数学'
        }
      ],
      Language: [
        {
          title: 'JAVA'
        },
        {
          title: 'Python'
        },
        {
          title: 'HTML5'
        }
      ],
      IDE: [
        {
          title: 'Ecplice'
        },
        {
          title: 'Editext'
        },
        {
          title: 'VScode'
        }
      ],
      Name: [
        {
          title: 'Jhon'
        },
        {
          title: 'Sarlah'
        },
        {
          title: 'Jack'
        }
      ],
      Age: [
        {
          title: '24'
        },
        {
          title: '31'
        },
        {
          title: '26'
        }
      ],
      Like: [
        {
          title: 'football'
        },
        {
          title: 'basketball'
        },
        {
          title: 'pingpong'
        }
      ]
    }
  },
  methods: {
    toggleAll () {
      this.allDisplay = !this.allDisplay
    },
    getFactorData () {
      this.factorList = this.$store.state.factorArray
      console.log(this.factorList)
    }
  }
}
</script>
<style scoped>
#factor{
  background-color: #fff;
}
/*因子选择展示区域factor-list-box样式*/
.factor-list-box{
  margin-top: 1.25rem;
  overflow: hidden;
  padding: 0 0 0.375rem 0.25rem;
  border-bottom: 1px solid #dddddd;
  min-height: 2.28125rem;
}
.factor-list-box .factor-list{
  width: 89.0625%;
  float: left;
  display: none;
}
.factor-list li{
  float: left;
  line-height: 0.6875rem;
  padding: 0 0.21875rem;
  box-sizing: border-box;
  border:1px solid #bf002e;
  border-radius: 3px;
  color:#bf002e;
  position: relative;
  margin: 0.34375rem 0.265625rem 0 0;
}
.factor-list .mint-badge{
  position: absolute;
  right: -5px;
  top:-5px;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  font-size: 12px !important;
  padding:0 !important;
  color: #fff;
  line-height: 12px;
}
.factor-list-box .iconfont{
  font-size: 20px;
  color:#999999;
  float: right;
  margin-top: 0.3125rem;
  margin-right: 0.2rem;
  display: none;
}
.factor-list-box .factor-tips-box{
  display: table;
  width: 100%;
  height: 2.28125rem;
}
.factor-tips-box .cell{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.factor-tips-box .cell p{
  font-size: 16px;
  line-height: 0.6875rem;
  color:#333;
}
/*用户选择因子面板 factor-select-panel样式*/
.factor-select-panel .panel-top{
  overflow: hidden;
  padding:0 0.4375rem;
  height: 0.9375rem;
  border-bottom: 1px solid #ddd;
}
.panel-top p{
  float: left;
  line-height: 0.9375rem;
}
.panel-top p.top-left-text{
  font-size: 16px;
  color: #999;
}
.panel-top p.top-left-result{
  font-size: 16px;
  color: #333;
}
.panel-top p.top-right-text{
  font-size: 14px;
  color: #4c91e2;
}
.panel-top p.iconfont{
  font-size: 14px;
  color: #4c91e2;
}
</style>
